import { useContext } from 'react';
import { Cascader } from 'antd';

import { MyContext } from '../../Store';

import './header.scss'

import webIco from '../../asset/img/header.jpg'

import menuData from '../LeftMenu/leftmenu.json'

export default function Header() {

    const data = menuData.data
    const { dispatch } = useContext(MyContext)

    const options = data.map(item => {
        return (
            {
                value: item.id,
                label: item.title,
                children: item.child.map(childItem => {
                    return {
                        value: childItem.id,
                        label: childItem.title,
                        file: childItem.file
                    }
                })
            }
        )
    })

    const onChange = (value, item) => {
        dispatch({ type: 'set', value: require(`../../markdown/${item[1].file}.md`).default })
    }

    return (
        <div className='guide_header' id='guide_header'>
            <div className='guide_header_bar'>
                <img src={webIco} alt='' />
                <Cascader options={options} onChange={onChange} placeholder="开始" />
                <a href='https://www.55geek.cn' target='_blank' rel="noreferrer">博客</a>
            </div>
        </div>
    )
}
